@import "mixin";

.switches {
  position: fixed;
  top: 0;
  width: 100%;
  height: rem(35px);
  line-height: rem(34px);
  background-color: #fafafa;
  z-index: 10;
  >.switches-wrapper {
    display: flex;
    width: 100%;
    height: 100%;
    @include border-bottom-1px(#e5e5e5);
    >li {
      flex: 1;
      height: 100%;
      text-align: center;
      font-size: rem(13px);
      color: #999999;
      >span {
        display: inline-block;
      }
    }
    >.active {
      >span {
        color: #dc3838;
        border-bottom: rem(1px) solid #dc3838;
      }
    }
  }
}

.list-content {
  position: fixed;
  top: rem(35px);
  bottom: 0;
  width: 100%;
  transition: all 0.7s;
  background-color: #fff;
  >div {
    >.list-header {
      padding: 0 rem(16px);
      width: 100%;
      height: rem(36px);
      line-height: rem(36px);
      font-size: 0;
      @include border-bottom-1px(#e5e5e5);
      >.left {
        float: left;
        display: inline-block;
        height: 100%;
        >span {
          font-size: rem(12px);
          color: #999999;
        }
      }
      >.right {
        float: right;
        display: inline-block;
        height: 100%;
        >span {
          font-size: rem(12px);
          color: #999999;
        }
      }
    }
    >.list-wrapper {
      width: 100%;
      >.list-item {
        padding: 0 rem(16px);
        width: 100%;
        height: rem(60px);
        background-color: #fff;
        font-size: 0;
        @include border-bottom-1px(#e5e5e5);
        >a {
          display: block;
          width: 100%;
          height: 100%;
          >.left {
            padding-top: rem(10px);
            float: left;
            display: inline-block;
            height: 100%;
            >p {
              line-height: rem(20px);
              font-size: rem(16px);
              color: #333333;
            }
            >span {
              line-height: rem(20px);
              font-size: rem(13px);
              color: #999999;
            }
          }
          >.right {
            padding-top: rem(10px);
            float: right;
            display: inline-block;
            height: 100%;
            >.text-wrapper {
              display: inline-block;
              vertical-align: top;
              text-align: right;
              >p {
                line-height: rem(20px);
                font-size: rem(16px);
                color: #333333;
              }
              >span {
                line-height: rem(20px);
                font-size: rem(13px);
                color: #999999;
              }
            }
            >.arrow-wrapper {
              display: inline-block;
              vertical-align: top;
              height: 100%;
              line-height: rem(40px);
              >.arrow-right {
                display: inline-block;
                margin: 0 0 0 rem(6px);
                vertical-align: middle;
                width: rem(8px);
                height: rem(12.5px);
                @include bg-image('../images/arrow-right');
                background-repeat: no-repeat;
                -webkit-background-size: 100% 100%;
                background-size: 100% 100%;
              }
            }
          }
        }
      }
    }
  }
}

#uninvest-list {
  transform: translateX(100%);
}